<template>
    <div id="com">
        <el-tabs v-model="curTab" type="card" @tab-click="onTabClick">
            <el-tab-pane label="桥梁" name="qiaoliang" >
                <qiaoliang :flag="qiaoliang" :approveStateList="approveStateList"></qiaoliang>
            </el-tab-pane>
            <el-tab-pane label="涵洞" name="handong" >
                <handong  :flag="handong" :approveStateList="approveStateList"></handong>
            </el-tab-pane>
			<el-tab-pane label="高边坡/高挡墙" name="gaobianpo" >
			    <gaobianpo :flag="gaobianpo" :approveStateList="approveStateList"></gaobianpo>
			</el-tab-pane>
			<el-tab-pane label="沥青路面" name="gonglu" >
			    <gonglu :flag="gonglu" :approveStateList="approveStateList"></gonglu>
			</el-tab-pane>
			<el-tab-pane label="路基" name="luji" >
			    <luji :flag="luji" :approveStateList="approveStateList"></luji>
			</el-tab-pane>
			<el-tab-pane label="沿线设施" name="yanxiansheshi" >
			    <yanxiansheshi :flag="yanxiansheshi" :approveStateList="approveStateList"></yanxiansheshi>
			</el-tab-pane>
			<el-tab-pane label="房屋设施" name="fangwushebei" >
			    <fangwushebei  :flag="fangwushebei" :approveStateList="approveStateList"></fangwushebei>
			</el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import qiaoliang from './content/qiaoliang-list.vue'
import handong from './content/handong-list.vue'
import gaobianpo from './content/gaobianpo-list.vue'
import gonglu from './content/gonglu-list.vue'
import luji from './content/luji-list.vue'
import yanxiansheshi from './content/yanxiansheshi-list.vue'
import fangwushebei from './content/fangwushebei-list.vue'
export default {
    components:{qiaoliang, handong,gaobianpo,gonglu,luji,yanxiansheshi,fangwushebei},
    data(){
        return{
            curTab:'qiaoliang',
			qiaoliang:true,
			handong:false,
			gaobianpo:false,
			gonglu:false,
			luji:false,
			yanxiansheshi:false,
			fangwushebei:false,
			approveStateList:[]
			
        }
    },
    methods: {
		onTabClick(tab, event){
			this[tab.name]=true;
			this.setTableHeight(tab)
		},
		
		getApprovStatus(){
			this.$http.getDictKeyList({parentCode:'patrolStatus'})
			.then((res)=>{
				this.approveStateList=res.data.data ||[]
			}).catch((err)=>{
				throw(err)
			})
		},
		
		setTableHeight(obj){
			this.$nextTick(()=>{
				var el=document.querySelector("#pane-"+obj.name +" .el-table");
				var pHeight=el.parentNode.offsetHeight;
				var ethw=el.querySelector(".el-table__header-wrapper");
				if(!ethw){return}
				var tableHeadHeight=ethw.offsetHeight;
				var tablebody=el.querySelector(".el-table__body-wrapper");
				if(tablebody && pHeight>0){
					tablebody.style.height=pHeight-tableHeadHeight +"px";
					tablebody.style.overflowY="auto"
				}
			})
		}
    },
	created() {
		this.getApprovStatus()
	}
}
</script>
<style scoped lang="scss">
#com{
    height: 100%;
}

/deep/ .el-tabs{
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .el-tabs__header{
        margin-bottom: 0px;
        .el-tabs__nav{
            width: 100%;
            border: none;
            .el-tabs__item{
                text-align:center;
                border-left: none;
                border-right: 1px solid #eee;
                &.is-active{
                    border-bottom-color:#fff;
                }
            }
        }
    }
    .el-tabs__content{
        flex: 1;
        overflow: hidden;
        .el-tab-pane{
            height: 100%;
			padding: 10px;
			box-sizing: border-box;
        }
    }
}

/deep/ .detail-component{
	 .el-table{
		.cell{
			white-space: initial;
		}
	}
}

</style>


